<template>
  <div id="side-bar">
    <scroll :probeType="3" class="scroll" ref="scroll">
      <div v-for="(item, index) in category"
           :key="index" @click="titleClick(index)"
           class="not-active"
           :class="{active:currentIndex === index}">
        {{item.title}}
      </div>
    </scroll>
  </div>
</template>

<script>
  import Scroll from "@/components/common/scroll/Scroll";

  import pubsub from 'pubsub-js'

  export default {
    name: "CategorySideBar",
    components:{
      Scroll,
    },
    props:{
      category:{
        type:Array,
        default(){
          return []
        }
      },
    },
    data(){
      return {
        currentIndex:0,
      }
    },
    watch: {
      // 监听category是否改变，改变就用$nextTick函数在调用refresh（）
      category(){
       this. $nextTick(() => {
         this.$refs.scroll.refresh()
       })
      }
    },
    methods:{
      titleClick(index){
        this.currentIndex = index
        // 发送title所对应的index以便于告诉父组件更新内容顶部的数据
        pubsub.publish('titleClick',index)
      }
    }
  }
</script>

<style scoped>
  #side-bar{
    font-size: 13px;
    line-height: 40px;
    text-align: center;
  }
  .not-active{
    background-color: rgba(238,238,238,.6);
  }
  .active{
    font-weight: 700;
    border-left:2px solid #199aa8;
    color: #50b7c1;
    background-color: rgb(255,255,255);
  }
  .scroll{
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    overflow: hidden;
    width: 22%;
  }
</style>